import { useEffect, useState, useMemo } from "react";
import { Form, Skeleton, ErrorBlock, Grid } from 'antd-mobile';
import { WordCloud } from '@ant-design/plots';
import { HistogramOutline, FrownOutline } from 'antd-mobile-icons';
import { useSelector, useDispatch } from 'react-redux';
import { PortraitAnalysisTitle } from './PortraitAnalysisTitle';
import { fetchExplain1 } from '../slices/questionsSlice';
import { useWindowSize } from "@uidotdev/usehooks";
import { Explain } from './Explain';

export function HobbyWordCloud({ data }) {
    const dispatch = useDispatch();
    const analysis = useSelector(state => state.questions.present.analysis);
    const explain1 = useSelector(state => state.questions.present.explain1);
    const [loading, setLoading] = useState(true);
    const [explainVisible, setExplainVisible] = useState(false);
    const { width: windowWidth, } = useWindowSize();
    const chartsColumn = useMemo(() => windowWidth < 700 ? 1 : 2, [windowWidth]);
    const chartsSpan = useMemo(() => (chartsColumn === 2 && !explainVisible) ? 2 : 1, [chartsColumn, explainVisible]);
    useEffect(() => {
        let timeout;
        function init() {
            setLoading(true);
            setExplainVisible(false);
            if (analysis?.status === 'success') {
                timeout = setTimeout(() => setLoading(false), 1000);
            }
        }
        init();
        return () => clearTimeout(timeout);
    }, [data, analysis?.status]);
    useEffect(() => {
        let timeout;
        if (explainVisible && explain1?.status !== 'success' && explain1?.status !== 'pending') {
            function fetch() {
                timeout = setTimeout(() => dispatch(fetchExplain1(data)), 1000);
            }
            fetch();
        }
        return () => clearTimeout(timeout);
    }, [explainVisible, explain1?.status, data, dispatch]);

    return analysis && <Form.Item
        label={loading ? "" : <>
            <HistogramOutline color='#000' />&nbsp;
            <PortraitAnalysisTitle
                text={"您的爱好画像分析。"}
                explainLabelStyle={{ textDecoration: "underline", color: "#229880", cursor: "pointer" }}
                explainLabel={data && data.length > 0 ? (explainVisible ? "收起解释" : "解释此画像") : ""}
                onClickExplain={() => setExplainVisible(!explainVisible)}
                speed={10}
            >
            </PortraitAnalysisTitle>
        </>}
    >
        {
            loading ?
                <>
                    <Skeleton.Title animated />
                    <Skeleton.Paragraph lineCount={7} animated />
                </>
                :
                (
                    data && data.length > 0 ?
                        <>
                            <Grid columns={chartsColumn} gap={8}>
                                <Grid.Item span={chartsSpan}>
                                    <WordCloud {...{
                                        data,
                                        wordField: 'label',
                                        weightField: 'score',
                                        colorField: 'label',
                                        wordStyle: {
                                            fontFamily: 'Verdana',
                                            fontSize: [12, 32],
                                        },
                                    }} />
                                </Grid.Item>
                                {
                                    explainVisible && <Grid.Item>
                                        <Explain data={explain1}></Explain>
                                    </Grid.Item>
                                }
                            </Grid>
                        </>
                        :
                        <>
                            <ErrorBlock status='default' description={
                                <span>
                                    <FrownOutline color='#000' />
                                    请输入您的兴趣爱好。
                                </span>
                            } />
                        </>
                )
        }

    </Form.Item>;
}
